<template>
  <div class="action-btn-wp">
    <el-popover
        placement="left"
        width="400"
        trigger="click">
      <el-button type="text" size="small" slot="reference" @click.stop.prevent="handelClick">物流详情</el-button>

      <div class="popper-box" v-loading="loading" element-loading-text="查询中">
        <header>
           <div v-if="express.img" class="img-wp">
             <img :src="processImg(abs_img)">
           </div>
           <div class="info">
             <p>{{express.goodsName}}</p>
             <p>
               <span>{{express.expressChanel}}</span>
               <span>{{express.expressNo}} </span>
               <!--<el-button type="text" size="small" class="btn" @click.stop.prevent="changeExpress()">单号有误？</el-button>-->
             </p>
           </div>
        </header>
        <div class="body">
           <div v-if="express.expressDetails && express.expressDetails.length>0">
             <div class="header">物流详情：</div>
             <div class="detail">
               <ul class="express-list">
                 <li v-for="(item,index) in express.expressDetails" :key="index" :class="{'new':index==0}">
                    <span v-if="index==0" class="tag">最新</span>
                    <div>{{item.ftime}}</div>
                    <div>{{item.status}} {{item.context}}</div>
                 </li>
               </ul>
             </div>
           </div>
          <empty v-if="!express.expressDetails || express.expressDetails.length<=0">暂无物流信息</empty>
        </div>
        <footer>

        </footer>
      </div>

    </el-popover>

    <!--修改发货-->
    <!--<action-deliver :is-edit="true" ref="deliver"></action-deliver>-->
  </div>
</template>

<script>
  import {osshost} from '@/api/util/fetch';
  import {getOrderInfoExpress} from '@/api/order';
  import {getServiceExpress} from '@/api/afterService';
  import ActionDeliver from './actionDeliver.vue';

  import Empty from '@/components/Empty';

  export default {
    name: 'actionLogistics', //物流信息
    components:{
      'action-deliver':ActionDeliver,
      'empty':Empty,
    },
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'id'
      },
      type:{
        type:String,
        default:'user', //user,商户发货信息，merchant，商户收货信息,用户发给商户
      },
      service:{  //是否是服务订单物流，(售后退换货维修物流)
        type:Boolean,
        default:false,
      }
    },
    data(){
      return {
        loading:false,
        express:{ //物流信息
          expressNo:'', //快递号
          goodsName:'', //商品名称
          img:'',//商品图片
          expressChanel:'', //快递渠道
          logisticsCompany:'',
          expressDetails:[
            /*{
              time:'', //物流更新时间
              ftime:'', //格式化后的物流时间
              status:'', //物流状态
              context:'', //物流描述
            },*/
            /*{
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            },
            {
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            },
            {
              "context": "在官网\\\"运单资料&签收图\\\",可查看签收人信息\\",
              "ftime": "2017-09-28 09:04:45",
              "status": "已签收",
              "time": "2017-09-28 09:04:45"
            }*/

          ],//快递详情
        },
      }
    },
    computed:{
      abs_img()
      {
         if(this.express && this.express.img)
         {
           if(/(http|https):\/\//.test(this.express.img))
           {
             return this.express.img;
           }

           return osshost + this.express.img;

         }

         return '';
      }
    },
    methods: {
      handelClick()
      {
        //先关闭所有pop，防止窗口重叠
        document.querySelector("#app").click();

        let row = this.scope.row || {};
        let data = {
          id:row[this.scopeId],
          serviceOrderId:row[this.scopeId],
          type:this.type || 'user',
        };

        this.loading = true;

        if(this.service)
        {
          getServiceExpress(data).then(resp=>{
            this.express = resp.data || {};

            this.loading = false;

          }).catch(err=>{

            this.loading = false;

          });
        }
        else
        {
          getOrderInfoExpress(data).then(resp=>{
            this.express = resp.data || {};

            this.loading = false;

          }).catch(err=>{

            this.loading = false;

          });
        }


      },
      changeExpress() //修改快递号
      {
        //this.$refs.deliver.init();
      },
      processImg(url)
      {
        if(url && url !=='undefined')
        {
          return url + '?x-oss-process=image/resize,w_100';
        }

        return '';
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../styles/mixin.scss";

  .popper-box
  {
    > header
    {
       padding: 10px;
       border-bottom: 1px solid #eee;
       @include clearfix;

       .img-wp
       {
         float: left;
         width: 40px;
         height: 40px;
         overflow: hidden;
         border: 1px solid #ccc;
         border-radius: 3px;
         img
         {
           width: 100%;
           height: 100%;
           border: none;
           vertical-align: top;
         }
       }

      .info
      {
         margin-left: 50px;
         p
         {
           margin: 5px 0 0 0;
           .btn
           {
              margin-left: 10px;
              text-decoration: underline;
           }
         }
      }

    }

    > .body
    {
      padding: 10px;

      .header
      {
        font-size: 14px;

      }

      .detail
      {
        padding: 10px;

        .express-list
        {
          max-height: 200px;
          overflow: auto;
          list-style: none;
          padding: 0;
          margin: 0;

          li
          {
            position: relative;
            padding: 10px 10px 10px 58px;
            margin-right: 20px;
            font-size: 12px;

            + li
            {
              border-top: 1px solid #eee;
            }

            .tag
            {
              display: none;
              position: absolute;
              left: 20px;
              top: 50%;
              padding: 2px;
              margin-top: -9px;
              color: #fff;
              background: red;
            }

            &:before
            {
              position: absolute;
              content: "";
              left: 10px;
              top: 0;
              bottom: 0;
              border-left: 2px solid #eee;
              z-index: 0;
            }
            &:after
            {
              content: "";
              position: absolute;
              left: 6px;
              top: 50%;
              margin-top: -5px;
              width: 10px;
              height: 10px;
              background: #20a0ff;
              border: 2px solid #fff;
              z-index: 1;
              border-radius: 50%;
              box-sizing: border-box;
            }

            &.new
            {
              color: red;
              &:after
              {
                background: red;
              }

              .tag
              {
                display: block;
              }
            }
          }
        }
      }
    }

    > footer
    {
      padding: 10px;
    }
  }
</style>